import { memo, useCallback, useEffect, useState } from "react";
import "./App.css";

function Aaa() {
    const [,setNum] = useState(1);

    useEffect(() => {
        setInterval(()=> {
            setNum(Math.random());
        }, 2000)
    },[]);


    const [count, setCount] = useState(1);

    useEffect(() => {
        setInterval(() => {
            setCount(1)
        }, 2000)
    })
    // function callbackFn () {

    // }

    const callbackFn = useCallback(() => {}, [])

    // const count2 = count * 10
    const count2 = useMemo(()=> {
        return count * 10
    }, [count]) // count变化时，count2才会重新计算，不会每次计算

    return <div>
        {/* 传递一个callbackFn函数给到MemoBbb，memo失效了，因为每次组件重新渲染，函数都是一个新的值 */}
        {/* 用useCallback，他的作用是当dep数组不变时，始终返回旧的数组，只有当他变化后，才会返回新的数组 */}
        <MemoBbb count={count2} callback={callbackFn}></MemoBbb>
    </div>
} 


function Bbb(props) {
    console.log('bbb render');
    return <h2>{props.count}</h2>
}
// 如果不加memo，Bbb组件会渲染很多次；
// 加了Memo，只有当props修改时，Bbb组件才会发生改变
const MemoBbb = memo(Bbb)



function App() {
    return (
      <Aaa></Aaa>
    )
}

export default App;
